<template>
  <td
    :colspan="item.col"
    :rowspan="item.row"
    :class="{ cellHide: item.hide }"
    style=""
    @contextmenu.prevent="rightClick($event, trIndex, tdIndex)"
  >
    <slot :td="item" />
  </td>
</template>

<script>
  export default {
    name: 'FancyEditTableItem',
    components: {},
    props: {
      item: {
        type: Object,
        default: {},
      },
      tdIndex: {
        type: Number,
        default: 0,
      },
      trIndex: {
        type: Number,
        default: 0,
      },
      tdStyle: {
        type: String,
        default: '',
      },
    },
  };
</script>

<style scoped>
  td {
    height: 20px;
    padding: 6px;
    padding-top: 0;
    border: 1px #d2d2d2 solid;
    border: 1px solid #d2d2d2;
    word-break: break-word;
  }

  .cellHide {
    display: none;
  }

  .activeItem {
    border: 2px solid #e6a23c;
  }

  .component-td {
    color: #bbb;
    font-size: 12px;
  }

  .activeItem div span {
    color: #409eff;
  }
</style>
